<template>
	<div>
		<smpPanel title="请求报文">
			<el-form :inline="false" label-width="90px" size="mini" ref="form" :model="query" :rules="rules">
				<el-row>
					<el-col :span="8">
						<el-form-item label="IP地址:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }" prop="ip">
							<el-select v-model="query.ip" style="width: 100%" placeholder="IP地址">
								<el-option v-for="item in esbEnvironmentList" :key="item.ip"
									:label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="端口:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }" prop="port">
							<el-input v-model="query.port"></el-input>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="字符编码:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }"
							prop="charSet">
							<el-select v-model="query.charSet" style="width: 100%" placeholder="IP字符编码">
								<el-option v-for="item in dict('SMP0004')" :key="item.itemCode" :label="item.itemName"
									:value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="请求报文:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }"
							prop="requestBody">
							<el-input type="textarea" v-model="query.requestBody" :autosize="{minRows:10,maxRows:11}">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item size="mini" style="text-align: right;">
							<el-button type="primary" plain @click="onSubmit">发&nbsp;&nbsp;&nbsp;送</el-button>
							<el-button @click="reset">重&nbsp;&nbsp;&nbsp;置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				</el-row>
			</el-form>
		</smpPanel>
		<smpPanel title="数据响应">
			<el-form :inline="false" label-width="120px" size="mini" ref="form" :model="query" :rules="rules">
				<el-row>
					<el-col :span="24">
						<div class="article">
							<!-- vue展示markdown内容,v-highlight自定义指令 -->
							<div v-highlight v-html="query.responseBody" class="markdown-body" id="content"></div>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</smpPanel>
	</div>
</template>

<script>
	"use strict";
	import {
		getEsbEnvironmentByEsbFlg
	} from '@/api/environment.js';
	import {
		socketTrans
	} from '@/api/trans.js';
	
	import {
		service2Json,service2Xml
	} from '@/api/serviceExample.js';
	
	export default {
		data() {
			return {
				row:{},
				esbEnvironmentList: [],
				query: {
					ip: "10.0.91.15",
					port: "10270",
					charSet: "01",
					requestBody: ` <Transaction>
    <Header>
      <sysHeader>
        <msgId>118202303150916080000000000000535029</msgId>
        <msgDate>2023-04-06</msgDate>
        <msgTime>08:43:10.764</msgTime>
        <globalSq>1182023031510000534410001000000</globalSq>
        <servCd>P00001012085</servCd>
        <operation/>
        <tranCode>90001</tranCode>
        <sysCd>118</sysCd>
        <serverCd/>
        <bizId>esb</bizId>
        <bizType>esb</bizType>
        <orgCd/>
        <termCd/>
        <resCd/>
        <resText/>
        <bizResCd/>
        <bizResText/>
        <authId/>
        <authPara/>
        <authContext/>
        <pinIndex/>
        <pinValue/>
        <extend/>
      </sysHeader>
    </Header>
    <Body>
      <request>
        <bizHeader>
          <TxnCod>90001</TxnCod>
          <SBnkNo>301290000007</SBnkNo>
          <RBnkNo>AHNX34010100</RBnkNo>
          <TTxnDat>20230406</TTxnDat>
          <TTxnTim>083500</TTxnTim>
          <SLogNo>202304060000007</SLogNo>
        </bizHeader>
        <bizBody>
          <FileNm>YYPT_30110_AHNX0_20230406_00_03.TXT</FileNm>
        </bizBody>
      </request>
    </Body>
  </Transaction>`,
					responseBody: this.$marked('```xml\n\n\n\n\n```')


				},
				rules: {
					ip: [{
						required: true,
						message: '请选择IP地址',
						trigger: 'change'
					}],
					port: [{
						required: true,
						message: '请输入端口',
						trigger: 'blur'
					}],
					charSet: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					standard: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					standard: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					preType: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					preLen: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					supplement: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					includeSelf: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					requestBody: [{
						required: true,
						message: '请输入请求报文',
						trigger: 'blur'
					}],
				}
			}
		},

		created() {
			
			
			this.row = this.$route.query;
			console.info(this.row.proxyPath);
			if(this.row.proxyPath == undefined){
				this.getEsbEnvironmentList();
			}else{
				let proxyPath = this.row.proxyPath;
				let ip = proxyPath.split(":")[1].substring(2);
				let port = proxyPath.split(":")[2];
				this.query.ip = ip;
				this.query.port = port;
				this.query.charSet = this.row.msgCode;
				
				this.getEsbEnvironmentList();
			}
		},

		methods: {
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
					if(this.row.proxyPath != undefined){
						service2Xml(this.row).then(response => {
							let data = response.data.extend;
							this.query.requestBody= data;
							//跳转到测试页面
							//this.$refs.xmlExample.ShowDialog(data);
							//alert(data);
						}).catch(error => {
							console.info("失败");
							console.info(error.message);
						});
					}
					
				})
			},

			onSubmit() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '网络测试中，请稍后',
							spinner: 'el-icon-loading'
						});
						socketTrans(this.query).then(response => {
							loading.close();
							if (response.data.code = '0000') {
								this.query.responseBody = this.$marked('```xml\n' + response.data.extend +
									'\n```');
							} else {
								this.$message({
									duration: 5000,
									type: 'error',
									message: response.data.message
								});
							}
						}).catch(error => {
							loading.close();
							this.$message({
								duration: 5000,
								type: 'error',
								message: '联通性测试失败！'
							});
						});;

					}
				});
			}
		}
	}
</script>
<style scoped>
	.article {
		margin-top: -11px;
		margin-left: 0px;
		padding-left: 0px;
	}
</style>
